import { connect } from '@formily/react';
import BizBody from '@inbiz/basic/BizBody';
import ProcessLog from '@inbiz/basic/ProcessLog';
import { TextWidget } from '@inbiz/react';
import { getEditor } from '@inbiz/utils';
import { useInbizRouter } from '@inbiz/hooks';
import '../locale';
import './style.less';

export interface ProcessLogBtnProps {
  /**
   * @description 组件样式名，和style样式对应 ↓↓ eg: inbiz-ProcessLogBtn ↓↓
   */
  prefixCls?: string;
  /**
   * @description 类型
   * @default primary
   */
  type?: string;
  /**
   * @description 扩展样式名
   * @default button
   */
  className?: string;
  onClick?: (e: any) => void;
  processQueryData: {
    instanceId?: string;
    processId?: string;
  };
}

const App = (props: ProcessLogBtnProps) => {
  const { processQueryData = { instanceId: '', processId: '' } } = props;
  const isEditor = getEditor();
  const router = useInbizRouter();
  let _query = router.location.query;
  let _instanceId = processQueryData?.instanceId || _query?.instanceId;
  let _processId = processQueryData?.processId || _query?.processId;
  const batchApproval = sessionStorage.getItem('batchApprove');
  // 判断是否是编辑状态,显示不同的组件
  return (
    <div {...props}>
      {isEditor ? (
        <BizBody {...props}>
          <div className="inbiz-ProcessLogBtn">
            <TextWidget>ProcessLogBtn.pLog.noLog</TextWidget>
          </div>
        </BizBody>
      ) : batchApproval ? (
        ''
      ) : (
        <BizBody {...props}>
          <div
            style={{ height: 'calc(100vh - 150px)', border: '1px solid #d9d9d9', marginBottom: 10 }}
          >
            <ProcessLog instanceId={_instanceId || ''} processId={_processId || ''} />
          </div>
        </BizBody>
      )}
    </div>
  );
};
const ProcessLogBtn = connect(App);
export default ProcessLogBtn;
export { ProcessLogBtn };
